<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@include file="/static/common/taglib.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>物料管理</title>
    <%@include file="../../public/commonCss.jsp" %>
    <%@include file="../../public/commonJs.jsp" %>
</head>
<body ms-controller="main">
<div id="wrapper">
    <div class="boxmain whiteBox lrbox">
        <div class="lrboxleft borderR" style="width:70%">
            <div class="from-header borderB contentbox">
                <div>
                    <span class="font14"> 所属分类:</span><a id="category"><span class=" fontOrange2">物料查询</span></a>
                    <button class="layui-btn layui-btn-normal layui-btn-small" style="float:right;margin-left:20px"
                            ms-on-click="loadSearchData()">搜索
                    </button>
                    <select ms-duplex="searchKey1.currentNum" style="float:right;margin-left:20px">
                        <option value="">--是否在库--</option>
                        <option value="1">在库</option>
                        <option value="0">出库</option>
                    </select>
                    <input type="text" style="float:right;margin-left:20px" class="inputText" placeholder="搜索名称，车次，车组号"
                           title="搜索名称，车次，车组号" ms-duplex="searchKey1.searchKey"/>
                    <button class="layui-btn layui-btn-normal layui-btn-small" style="float:right;" ms-on-click="addThing()">新增物品
                    </button>
                </div>
            </div>
            <div class="from-body withheader contentbox layui-form" style=" overflow: auto;">
                <table class="layui-table">
                    <thead>
                    <tr>
                        <th>行号</th>
                        <th>物品编号</th>
                        <th>物品分类</th>
                        <th>物品信息</th>
                        <th>备注</th>
                        <th>是否在库</th>
                        <th>是否可用</th>
                        <th>下载二维码</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody ms-each="tableData">
                    <tr ms-on-click="editThing(el)">
                        <td>{{(currentPage-1)*pageSize+$index+1}}</td>
                        <td>{{el.id}}</td>
                        <td>{{el.typeName}}</td>
                        <td>{{el.name}}</td>
                        <td>{{el.trainNum}}</td>
                        <td>
                            <span ms-if="el.currentNum=='0'" style="color: cornflowerblue">出库</span>
                            <span ms-if="el.currentNum=='1'">在库</span>
                        </td>
                        <td>{{el.canUse=="1"?"可用":"故障"}}</td>
                        <td><a ms-on-click="downLoad(event,el)" href="javascript:;" style="color: #4287cf;">点击下载二维码</a>
                        </td>
                        <td>
                            <div class="tableText">
                                <a href="javascript:;" class="operate del" title="删除"
                                   ms-on-click="deleteRecord(el)"></a>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <!-- 分页 -->
                <!-- 分页 -->
                <div id="demo" class="fenye">
                </div>

            </div>
        </div>
        <div class="lrboxmain borderL" style="margin-left:70%">
            <div class="from-header borderB ">
                <span class="font14">当前物品:<span class=" fontOrange2">{{thingName}}</span></span>
                <button class="layui-btn layui-btn-small layui-btn-normal fr"
                        ms-on-click="saveOrUpdateThing()">保存
                </button>
            </div>
            <div class="from-body withheader" style=" overflow: auto;">
                <table class="layui-table" lay-skin="nob">
                    <tbody>
                    <tr>
                        <td width="100" align="right" class="font14"><span class="fontRed">*</span>物品分类：</td>
                        <td width="150">
                            <select ms-duplex="thing.type">
                                <option value="">--请选择物品类型--</option>
                                <c:forEach items="${thingTypes}" var="codeData">
                                    <option value="${codeData.itemValue}">${codeData.itemText}</option>
                                </c:forEach>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td width="100" align="right" class="font14"><span class="fontRed">*</span>物品信息：</td>
                        <td width="150">
                            <input type="text" class="inputText" ms-duplex="thing.name" placeholder="请输入物品信息">
                        </td>
                    </tr>
                    <tr>
                        <td width="100" align="right" class="font14"><span class="fontRed"></span>备注：</td>
                        <td width="150">
                            <input type="text" class="inputText" ms-duplex="thing.trainNum" placeholder="备品备件">
                        </td>
                    </tr>
                    <tr>
                        <td width="100" align="right" class="font14"><span class="fontRed"></span>是否可用：</td>
                        <td width="150">
                            <select ms-duplex="thing.canUse">
                                <option value="">--请选择是否可用--</option>
                                <option value="1">可用</option>
                                <option value="0">不可用</option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td width="100" align="right" class="font14"><span class="fontRed"></span>是否在库：</td>
                        <td width="150">
                            <select ms-duplex="thing.currentNum" disabled>
                                <option value="">--请选择是否在库--</option>
                                <option value="1" selected>在库</option>
                                <option value="0">出库</option>
                            </select>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <!-- whitebox -->
</div>
<script type="text/javascript">
    var vm;
    avalon.ready(function () {
        vm = avalon.define({
            $id: "main",
            tableData: [],//表格数据
            thingName: "新增物品",
            currentPage: 1,
            pageSize: 15,
            thing: {
                id: "",
                name: "",
                type: "",
                trainNum: "",
                depNum: "",
                currentNum: "1",
                canUse: "1"
            },
            thing2: {
                id: "",
                name: "",
                type: "",
                trainNum: "",
                depNum: "",
                currentNum: "1",
                canUse: "1"

            },
            searchKey: {
                searchKey: "",
                currentNum: ""
            },
            searchKey1: {
                searchKey: "",
                currentNum: ""
            }
        });
        avalon.scan();
        loadTableData(1);
    });

    function downLoad(event, el) {
        window.location.href = '${ctx}/thingController/downLoadQrCode.action?id=' + el.id;
        event.stopPropagation();
    }
    //编辑物品
    function editThing(el) {
        vm.thingName = el.name;
        vm.thing = el.$model;
    }
    //添加物品
    function addThing() {
        vm.thingName = "新增物品";
        vm.thing = vm.$model.thing2;
    }
    function loadTableData(curr) {
        var dataStr = $.param(vm.$model.searchKey);
        dataStr = dataStr + '&currentPage=' + vm.$model.currentPage;
        $.ajax({
            type: 'post',
            url: '${ctx}/thingController/selectOnePage.action',
            data: dataStr,
            dataType: "json",
            timeout: 10000,
            beforeSend: function () {
                layui.layer.msg('正在加载数据...', {
                    icon: 16,
                    shade: 0.01
                });
            },
            success: function (data) {
                closeDialog();
                vm.tableData = data.result;
                layui.laypage({
                    cont: 'demo',
                    pages: data.totalPage,
                    curr: curr || 1, //当前页
                    skip: true,
                    skin: '#1E9FFF',
                    jump: function (obj, first) {
                        if (!first) {
                            vm.currentPage = obj.curr;
                            loadTableData(obj.curr);
                        }
                    }
                });

            }
        });
    }

    //删除记录
    function deleteRecord(el) {

        layui.layer.alert('你确定删除该物品吗?', {
            title: '提醒',
            btn: ['确定', '取消']
        }, function () {
            //执行删除的ajax
            $.ajax({
                type: 'post',
                url: '${ctx}/thingController/deleteThing.action?id=' + el.id,
                data: "",
                dataType: "json",
                timeout: 10000,
                success: function (data) {
                    if (data.code == 0) {
                        layer.msg('删除成功', {icon: 1});
                        loadTableData(1);
                    } else if (data.code == -1) {
                        layer.msg('删除失败,请重试', {icon: 2});
                    }

                }
            });
        });

    }
    //保存或者更新
    function saveOrUpdateThing() {

        if (vm.$model.thing.name == '' ||
            vm.$model.thing.type == '') {
            parent.layer.msg('必填项不能为空', {icon: 2, anim: 6});
            return;
        }
        var dataStr = $.param(vm.$model.thing);
        $.ajax({
            type: 'post',
            url: '${ctx}/thingController/saveOrUpdate.action',
            data: dataStr,
            dataType: "json",
            timeout: 10000,
            success: function (data) {
                if (data.code == 0) {
                    layer.msg('保存成功', {icon: 1});
                    addThing();
                    loadTableData(1);
                } else {
                    layer.msg('保存失败', {icon: 2});
                }
            }
        });
    }
    //加载搜索的数据
    function loadSearchData() {
        vm.searchKey = vm.$model.searchKey1;
        loadTableData(1);
    }
    var form = layui.form();
    form.on('checkbox(c1)', function (data) {
        console.log($(data.elem).attr("thingId"));
        console.log(data.value); //被点击的radio的value值
    });
    form.render();
</script>
</body>
</html>